<template>
  <div class="goods">
    <div v-loading="loading" element-loading-text="加载中..." style="min-height: 35vw;">
      <div class="img-item" v-if="!noResult">
        <div style="min-height: 35vw;">
            <!--商品-->
            <div class="demand-box">
              <mall-demand v-for="(item,i) in demands" :key="i" :msg="item"></mall-demand>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import demandApi from '@/api/demand'
import YButton from '@/components/YButton'
import mallDemand from '@/components/mallDemand'
export default {
 data () {
    return {
      demands: [],//需求列表
      currentPage: 1,//页码
      pageSize: 10,//每页记录数
      totalCount: 0,//总记录数
      noResult: false,
      error: false,
      loading: true,
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      let params = {
           page: this.currentPage,
           limit: this.pageSize
        }
      demandApi.demandList(params).then(response => {
        this.demands = response.page.list
        this.totalCount = response.page.totalCount

        if (response.code === 0) {
          this.noResult = false
          if (this.demands === null) {
            this.noResult = true
          }
          this.error = false
        } else {
          this.error = true
        }
        this.loading = false
      })
    }
  },

  components: {
    YButton,
    mallDemand
  }

}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.demand-box {
    width: 1220px;
    margin: 0 auto;
}
.img-item{
  display: flex;
  flex-direction: column;
}
</style>



